<template>
  <div style="width:100%;">
    <el-container>
      <el-header class="header">
        <span>基本信息</span>
        <div class="edit" style="color:#f7f7f7;" @click="dialogVisible = true;"><span>编辑</span></div>
      </el-header>
      <el-main>
        <el-form ref="form" :model="form" label-width="92px" class="from">
          <el-form-item label="姓名">
            <span style="color:#313b54;">{{userInfo.realName}}</span>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <span style="color:#313b54;">{{userInfo.sexName}}</span>
          </el-form-item>
          <el-form-item label="年龄">
            <span style="color:#313b54;">{{userInfo.age}}</span>
          </el-form-item>
          <el-form-item label="手机号">
            <span style="color:#313b54;">{{userInfo.phone}}</span>
          </el-form-item>
          <el-form-item label="微信">
            <span style="color:#313b54;">{{userInfo.wechatNumber}}</span>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <el-dialog title="编辑信息" :visible.sync="dialogVisible" width="40%">
      <div>
        <el-form ref="form" :model="form" label-width="92px" class="from">
          <el-form-item label="姓名">
            <el-input
              size="small"
              v-model="form.realName"
              placeholder="请填写姓名"
              style="width:200px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="请选择">
              <el-option
                v-for="item in sexList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker v-model="form.birthday" type="date" placeholder="请选择出生日期"
                            value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="微信">
            <el-input
              size="small"
              v-model="form.wechatNumber"
              placeholder="请填写您的微信号"
              style="width:200px;"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <span>取消</span>
        <div class="dialog_text"><span @click="editUserInfo()">确认</span></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          realName: this.globalData.userInfo.realName,//姓名
          radio: "1", //性别 1男 0 女
          birthday: "", //出生年月
          sex: "",
          phone: "",//手机号
          wechatNumber: "",//微信号
        },
        input: '',
        activeName: "first",
        dialogVisible: false,
        value: "",
        // 性别
        sexList: [
          {
            label: "男",
            value: "1"
          },
          {
            label: "女",
            value: "2"
          }
        ],
        userInfo: this.globalData.userInfo,
      };
    },
    methods: {
      editUserInfo(){
        let self = this;
        let obj = {
          token: self.globalData.token,
          realName: this.form.realName,
          sex: this.form.sex,
          birthday: this.form.birthday,
          wechatNumber: this.form.wechatNumber
        };
        self.$post("/User/updateUserAccountInfo", obj).then(res => {
          if (res.code === "200") {
            self.$message("修改成功");
            self.dialogVisible = false;
          } else {
            self.$message.error(res.message);
          }
        });
      }
    }
  };
</script>

<style scoped lang="less">
  .el-container {
    width: 100%;
  }

  .el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  .usermanage {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5;
    padding-right: 16px;
    padding-left: 16px;
    .edit {
      height: 30px;
      width: 70px;
      background-color: #b3302e;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
      letter-spacing: 0.8px;
    }
  }

  .from {
    .el-form-item__label {
      color: #f5f5f5 !important;
    }
    span {
      color: #f5f5f5;
    }
  }

  .el-form-item__label {
    color: #666b7a;
  }

</style>
